<template>
    <div class="nav">
        <div class="nav-job">
            <routerLink to="/my"><div><</div></routerLink>
            <div>我的收藏</div>
            <div @click="showConfirmDialog">清空</div>
        </div>
        <div class="shangpin">
            <div class="shangpin-job">
                <div><img src="../../assets/images/20.png" alt="" /></div>
                <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                <div class="a">
                    <div class="b">￥<span>108</span></div>
                    <div>¥ 297</div>
                </div>
            </div>
            <div class="shangpin-job">
                <div><img src="../../assets/images/20.png" alt="" /></div>
                <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                <div class="a">
                    <div class="b">￥<span>108</span></div>
                    <div>¥ 297</div>
                </div>
            </div>
        </div>
        <div class="shangpin">
            <div class="shangpin-job">
                <div><img src="../../assets/images/20.png" alt="" /></div>
                <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                <div class="a">
                    <div class="b">￥<span>108</span></div>
                    <div>¥ 297</div>
                </div>
            </div>
            <div class="shangpin-job">
                <div><img src="../../assets/images/20.png" alt="" /></div>
                <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                <div class="a">
                    <div class="b">￥<span>108</span></div>
                    <div>¥ 297</div>
                </div>
            </div>
        </div>
        <div class="shangpin">
            <div class="shangpin-job">
                <div><img src="../../assets/images/20.png" alt="" /></div>
                <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                <div class="a">
                    <div class="b">￥<span>108</span></div>
                    <div>¥ 297</div>
                </div>
            </div>
            <div class="shangpin-job">
                <div><img src="../../assets/images/20.png" alt="" /></div>
                <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                <div class="a">
                    <div class="b">￥<span>108</span></div>
                    <div>¥ 297</div>
                </div>
            </div>
        </div>
  </div>
  <!-- <div v-if="isOpen" class="modal">
      这是一个弹出框内容
      <button @click="clearModal">清空内容</button>
    </div> -->
</template>
<style scoped>
.nav-job {
  display: flex;
  padding: 10px;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.nav-job div:nth-child(2) {
  color: #09b674;
}
.shangpin img {
  width: 170px;
  height: 170px;
}
.a {
  display: flex;
  /* justify-content: space-between; */
  padding: 5px 0;
}
.a div:nth-child(2){
    margin-top: 5px;
    margin-left: 10px;
    color: #ccc;
    text-decoration: line-through;
  font-weight: 100;
}
.b {
  color: #f00;
}
.b span {
  color: #f00;
  font-size: 18px;
}
.shangpin {
  padding: 10px;
  display: flex;
  justify-content: space-around;
}
.shangpin-job {
  width: 48%;
  font-size: 14px;
}
.modal {
  border: 1px solid #000;
  padding: 20px;
  margin-top: 60px;
}
</style>
<script setup>

import { showConfirmDialog } from 'vant';

const beforeClose = (action) =>
  new Promise((resolve) => {
    setTimeout(() => {
      // action !== 'confirm'  拦截取消操作
      resolve(action === 'confirm');
    }, 1000);
  });

// showConfirmDialog({
//   title: '标题',
//   message:
//     '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
//   beforeClose,
// });
</script>
